<template>
	<view>
		<u-navbar title="添加黑名单" bgColor="#4a62e7" titleStyle="color:#fff" placeholder autoBack leftIconColor="#fff"></u-navbar>
		
		<view class="content pad10 c-919EAB fts14">
			<view class="backFFF bor_radius4 pad15 mab10">
				<view class="fts16 ftwt c-000 mab8">车辆信息</view>
				<view class='license-box bor_bottom_e8'>
					<view class="title-box">号牌号码</view>
					<carNumber class="wid100 flex1" ref="carNumber1" :value="addBlackListInfo.licenseNo" @input="(e)=>onChangeCarNumber(e,'add')"/>
				</view>
				<view class="license-box bor_bottom_e8" @click="licenseTypeShow=true">
					<view class="title-box">号牌种类</view>
					<view class="displayAli_cen flex1">
						<u--input v-model="addBlackListInfo.licenseType" readonly inputAlign="right" placeholder="请选择" border="none"></u--input>
						<view><u-icon name="arrow-right" color="#b7bbbf"></u-icon></view>
					</view>
				</view>
				<view class="license-box bor_bottom_e8" @click="licenseColorShow=true">
					<view class="title-box">号牌颜色</view>
					<view class="displayAli_cen flex1">
						<u--input v-model="addBlackListInfo.licenseColor" readonly inputAlign="right" placeholder="请选择" border="none"></u--input>
						<view><u-icon name="arrow-right" color="#b7bbbf"></u-icon></view>
					</view>
				</view>
				<view class='license-box bor_bottom_e8'>
					<view class="title-box">车辆识别代号</view>
					<u--input v-model="addBlackListInfo.vin" inputAlign="right" placeholder="请输入" border="none"></u--input>
				</view>
				<view class='license-box' style="padding-bottom: 0;">
					<view class="title-box">车辆型号</view>
					<u--input v-model="addBlackListInfo.carModel" inputAlign="right" placeholder="请输入" border="none"></u--input>
				</view>
			</view>
			<view class="backFFF bor_radius4 pad15 mab30">
				<view class="fts16 ftwt c-000 mab8">锁定信息</view>
				<view class="license-box bor_bottom_e8" @click="lockTypeShow=true">
					<view class="title-box">锁定类型</view>
					<view class="displayAli_cen flex1">
						<u--input v-model="addBlackListInfo.blackType" readonly inputAlign="right" placeholder="请选择" border="none"></u--input>
						<view><u-icon name="arrow-right" color="#b7bbbf"></u-icon></view>
					</view>
				</view>
				<view class='license-box bor_bottom_e8'>
					<view class="title-box">机动车所有人</view>
					<u--input v-model="addBlackListInfo.carOwner" inputAlign="right" placeholder="请输入" border="none"></u--input>
				</view>
				<view class='paddingT15px'>
					<view class="title-box mab10">锁定原因</view>
					<!-- <u--input v-model="addBlackListInfo.lockReason" placeholder="请输入锁定原因" border="none"></u--input> -->
					<u--textarea v-model="addBlackListInfo.lockReason" placeholder="请输入锁定原因" ></u--textarea>
				</view>
			</view>
			
			<view class="displayAli_cen justify-spb mat20 mab20">
				<button class="Btn2 wid45" type="button" @click="closeAdd()">取消</button>
				<button class="Btn1 wid45" type="button" @click="confirmAdd">保存</button>
			</view>
			
		</view>
		
		<!-- 号牌种类 -->
		<AsiPicker :show="licenseTypeShow" title='号牌种类' :list='licenseTypeList' label='itemLabel' @onConfirm="(e)=>onConfirmHandler(e,'licenseType','licenseTypeShow')" @onClose='licenseTypeShow=false' @scrolltolower='QDscrolltolower'></AsiPicker>
		<!-- 号牌颜色 -->
		<AsiPicker :show="licenseColorShow" title='号牌颜色' :list='licenseColorList' label='itemLabel' @onConfirm="(e)=>onConfirmHandler(e,'licenseColor','licenseColorShow')" @onClose='licenseColorShow=false' @scrolltolower='QDscrolltolower'></AsiPicker>
		<!-- 选择解锁（锁定）类型 -->
		<AsiPicker :show="lockTypeShow" title='锁定类型' :isSearch='false' :list='lockTypeList' label='itemLabel' @onConfirm="(e)=>onConfirmHandler(e,'blackType','lockTypeShow')" @onClose='lockTypeShow=false'></AsiPicker>
		
	</view>
</template>

<script>
	import carNumber from '@/components/carNumber/index.vue'
	import AsiPicker from '@/components/common/AsiPicker.vue'
	export default {
		components: {
			AsiPicker,carNumber
		},
		data() {
			return {
				requestUrl:'http://'+uni.getStorageSync("IPNumber")+':'+uni.getStorageSync("portNumber") +'/vepts/api/v1/guiyang',
				addBlackListInfo:{
					licenseNo:'',
					licenseType:'',
					licenseTypeCode:'',
					licenseColor:'',
					licenseColorCode:'',
					vin:'',
					carModel:'',
					carOwner:'',
					blackType:'',
					blackTypeCode:'',
					lockReason:'',
				},
				
				licenseTypeShow: false, // 号牌种类选择
				licenseTypeList: [{itemValue1:'大车'},{itemValue1:'小车'}], // 号牌种类
				licenseColorShow: false, // 号牌颜色选择
				licenseColorList: [{itemValue1:'蓝牌'},{itemValue1:'绿牌'}], // 号牌颜色
				lockTypeShow: false, // 锁定类型选择
				lockTypeList: [{itemValue1:'大车'},{itemValue1:'小车'}], // 锁定类型
			}
		},
		onLoad() {
			this.licenseTypeList = this.$staticData.licenseTypeList
			this.licenseColorList = this.$staticData.licenseColorList
			this.lockTypeList = this.$staticData.lockTypeList
		},
		methods: {
			clearValue(){
				this.licenseNo = ''
				this.$refs.carNumber.focus = false
			},
			onChangeCarNumber(e,type) { // 监听车牌号输入
				let numberType='carNumber1'
				let value='licenseNo'
				console.log(e);
				// 注释老键盘逻辑
				// if((e.length==7&&e.val.length>6) || (e.length==8&&e.val.length>7)){ // 键盘自动关闭
				if (e.length == 10 && e.val.length > 9) { // 键盘自动关闭
					if (this[value].slice(-1) != e.val.slice(-1)) { // 最后一位不相等
						this.$refs[numberType].focus = false
					} else {
						this.$refs[numberType].focus = this[value].length != e.val.length ? false : true
					}
				}
				this.addBlackListInfo[value] = e.val
			},
			onConfirmHandler(e, property, show){ // 选择器确认选择
				console.log('选项',e)
				if(!e){
					this.$all.toast('请先选择选项')
					return
				}
				this.addBlackListInfo[property+'Code'] = e.itemValue
				this.addBlackListInfo[property]= e.itemLabel
				this[show] = false
			},
			
			// 必填项校验
			saveCheck(param) {
				let check = true
		
				for(let i in param){
					if(!param[i]){ // 未填且必填
						let title='有必填项未填'
						switch (i){
							case 'license':
								title='请填写号牌号码！'
								break;
							case 'licensecode':
								title='请填写号牌种类！'
								break;
							case 'licensetype':
								title='请填写号牌颜色！'
								break;
							case 'lx':
								title='请选择锁定类型！'
								break;
							default:
						}
						console.log(title);
						if(i=='license' || i=='licensecode' || i=='licensetype' || i=='lx') {
							uni.showToast({
								title: title,
								icon: 'none'
							});
							check = false
						}
					}
				}
				
				return check
			},
			// 确定保存
			confirmAdd(){
				console.log('确定保存');
				let params = {
					license: this.addBlackListInfo.licenseNo, //                    必填
					licensecode: this.addBlackListInfo.licenseTypeCode, // 号牌种类      必填
					licensetype: this.addBlackListInfo.licenseColorCode, // 号牌颜色     必填
					vin: this.addBlackListInfo.vin, // 车辆识别代码 
					vehiclemodel: this.addBlackListInfo.carModel, // 车辆型号
					lx: this.addBlackListInfo.blackTypeCode, // 锁定类型                 必填
					sdr: uni.getStorageSync('loginName'), // 锁定人（登录用户名）     必填
					sdjg: uni.getStorageSync('tsno'), // 锁定机构（登录配置的检测站编号）  必填
					reason: this.addBlackListInfo.lockReason, // 锁定原因
					owner: this.addBlackListInfo.carOwner, // 车辆所有人
					address: uni.getStorageSync('IPNumber'), // 客户登录的ip地址
				}
				console.log(params);
				if (!this.saveCheck(params)) return // 提交时的校验
				this.$ajax.myRequest({
					url: this.requestUrl + '/blackadd',
					data: params,
					method: 'POST',
					success: (res) => {
						console.log(res);
						this.$all.toast(res.data.msg)
						if (res.data.code == 200) {
							setTimeout(()=>{
								this.closeAdd()
								uni.$emit('initialization') // 重新查询列表
							},1000)
						}else{
							
						}
					},
				})
			},
			closeAdd(){
				this.addBlackListInfo=this.$options.data().addBlackListInfo
				uni.navigateBack()
			},
			
		}
	}
</script>

<style lang="scss">
.license-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;

	.title-box {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		font-size: 30rpx;
		margin-right: 15px;
	}
}
</style>
